|
|
Wow! I survived. Until now, I really had no understanding of how to create a website. In fact, after receiving my B.A. in Sociology and Political Science at New College, I found that several of the positions I was interested in required web design and management skills. This left an unfortunate hole in my resume and put jobs that I was otherwise qualified for out of my reach. Taking this USF Instructional Graphics course with Prof. Simon has not only lifted the fog on what I previously found an intimidating affair, it could be the most practical course in my MLIS trajectory.
My Green Gaia Growers site is not the best example of tantalizing web design but it will be a foundation to better experiments. I think my color schemes may have saved me from the fact that it has a rigid boxed look from it’s prominent table structure. Typically, you’ll want to limit the use of bordered tables to give the site a more fluid appearance. Using a Cascading Style Sheet (CSS) would help me unlock my sites potential allowing me to quickly change the design without altering the content, simply by editing or replacing the style sheet.
Designing a great website not only depends on an artistic eye and design strategy it depends on an adequate understanding of a variety of applications; web editors, image editors, audio editors, etc. and codes; HTML, Javascript, and CSS etc. I was able to learn enough about the process to go much further on my own. I’ve borrowed web design books in the past but none of them were as cogent as the MacDonald, Beaird, and O’Reilly books. In addition, there are so many tutorials, blogs and websites geared toward webdesign that I will have no problem improving my skills. It’s amazing how many free resources are available as well. You can really put together an impressive site with no finances- and only the commitment of time and creativity. This course takes you from the basics to the complex in a well organized approach.
Fortunately the format allowed me the flexibility to operate at a delayed pace. This semester has been tough. I planned on working part time so that I could dedicate myself to my 2 classes and my 2 children but my job turned into a full time endeavor (selling and distributing plants throughout the state of Florida; 15 hr days). If I quit I’d be in dire straits in a horrid job market so I just had to accept the fact that my web project wasn’t going to be superb by semester’s end. I fell several weeks behind so participation to class discussions was pointless (forums and blogs are better when the communications are closer to realtime). I found it useful to read the forums, but most of the students were moving right along so I felt it best to simply find solutions on my own. I’ve been taking Dianne Austin’s Preparing Instructional Media course where the discussion board is an optional feature so my apologies to anyone who wondered why I was not routinely sharing my experiences throughout this course. Nevertheless, this class has put the wind in my sails. I’ve learned so much more than I could have imagined. I can actually look at the source code for a web page and identify the tags! While using Komposer in the WYSIWYG mode I click different parts of the web page and switch to HTML in order to recognize the tag features. After a while, you realize the inverse relationship. Ultimately, learning any technology properly depends on practice and many a sleepless night.
http://www.smartwebby.com/web_site_design/default.asp Smartwebby is a great final website to review. It offers just about everything for the designer. Tutorials, templates, roll over images, pop up menu ideas, etc. Particularly useful for Dreamweaver users.
http://bestwebgallery.com/ Great collection of websites. Check out the Brazilian WWF graphics. Best Web Gallery offers some mindboggling resources for site design. The 3-D wall link has a spiral photo gallery that can be rotated for selections- amazing!!!
http://www.botwg.com/ similarly to the above the best of the web gallery shows some beautifully crafted sites. The Klinkov site is executed with great clarity- necessary for the artist to best display his paintings. The Brecrest children’s clothing link is an example of appropriate design for a particular audience.
http://www.cssmoon.com/index.php The CSS moon site doesn’t offer any explanations of it’s ratings of other websites and the homepage doesn’t make clear what the purpose of the site is in the first place. Not as impressive as the above critiques.
http://www.csselite.com/ Again this site shows some impressive designs using CSS without any introduction. The assumption here is that if you are visiting a CSS site you probably don’t need an explanation of the site’s intentions.
http://oriental-gallery.com/ More fantastic websites to make my inferior site look even more pathetic. The DCM entertainment site is most inspiring lots of amazing Adobe Flash animation.
http://www.coolhomepages.com/ Finally!! This site not only has web site ratings, it has loads of resources for you to create your own. Look at the “proyectiva”. Very impressive use of Flash and design. Cool Home Pages has links to stylish templates, stock photos and logos.
http://www.kopozky.net/ There are undoubtedly worse people to pick on than Bill Gates considering his foundation is one of the largest philanthropic organizations ever. Maybe i’m just missing the joke here.
http://www.ok-cancel.com/ sorry folks. Maybe I’m just in a morning funk, but this comic hasn’t done the trick either.
http://www.bugbash.net/ Ok. Finally. You got me. It is sad to see where the Star Wars prequels have gone. A Star Wars Icecapades would be a travesty for sure. However, an Imax porn episode could be interesting as long as Jabba the hut is not involved.
FlashVista http://www.flashvista.com/ Tons of tutorials and flash categories. This site seems like it would cover most of your needs.
Flash Tutorials http://www.lukamaras.com/tutorials/cool-design/hitech-floating-menu.html very cool futuristic menu design. Worth learning soon.
SitePal – Flash Avatars http://www.sitepal.com/
Wow!! This one is way too cool! You can get an animated character or avatar to host your website. Check out the overview film. Prices range from $100 to $2500 a year depending on how many features you want. You can have a photo converted to an animated version but the features seem to get lost. The asian guy in the intro film looks very little like his cartoon avatar.
FLASH SOFTWARE:
Adobe Flash http://www.adobe.com/products/flash/ Ouch!! at $699 I won’t be purchasing Adobe Flash anytime soon. I’ll have to wait a few years.
Swift http://www.erain.com/Products/swift3d/ Swift is offered at half the price of Adobe Flash and is compatable using “smartlayer technology”
Swish http://www.swishzone.com/index.php And Swish wins the price war at $149. This could mean that your not getting all the bells and whistles of Adobe Flash but it describes most of the standard Flash features.
SCRIPTS:
HotScripts http://www.hotscripts.com/ This site might be helpful, but I had no succes finding visual examples of scripts. That would be more informative.
MP3S:
Basic info about MP3s http://www.soundstageav.com/mastersonaudio/20050201.htm hey, this explanation gives a clear history of the MP3 format. Makes you wonder what audio technology is looming around corner.
How to create .M3U files and streaming audio http://www.selfseo.com/story-13698.php
Very cool and concise explanation of the pros of streaming audio, like not having your copyrighted materials downloaded onto anyone’s hard drive or having to wait for a rather large file to completely download before you can here it. The .M3U file is a simple “go between link” that feeds the .mp3 without having to download- and it’s a simple process that can be done in notepad!!
Audacity – Free audio editor http://audacity.sourceforge.net/
As a musician, I was mesmerized by Audacity. I used to record on a Yamaha 4 track which cost me over $300 at the time. I can do so much more with this free audio editor than I could then. With a seemingly unlimited number of tracks and built in special effects like phaser and delay I could easily get lost creating sound collages.
Musicovery Internet Radio http://musicovery.com/
I gave the word music genre a listen and wow no interruptions!! I often listen to Radio 360 but a tranquil track can rudely find a disruptive Walmart ad breaking through.
Pandora Internet Radio http://www.pandora.com/
Check out the Music Genome Project link at the top of the homepage!! Rather than pigeon holing musicians into specific genres, these guys are analyzing individual tracks. Therefore, you could hear Coldplay’s “Ring of Fire” cover under country or Ween’s “Dancin in the Show tonight” under childrens (scary). Pandora has a member login so that you can save your personal settings and access them anywhere.
FREE WEB EDITORS –
Without actually downloading and using the following editors it’s kind of hard to critique them. Over all, these editors are striving to offer multiple functions. Instead of serving solely as web editors they are offering chatroom, e-mail, and web browsing capabilities. Sea Monkey seems to be the better of these three.
Amaya http://www.w3.org/Amaya/Amaya.html
Trellian http://www.trellian.com/webpage/
SeaMonkey http://www.seamonkey-project.org/
FREE TEXT EDITORS:
http://www.thefreecountry.com/webmaster/htmleditors.shtml#htmleditors This site gives a good general overview of both free wysiwyg and text editors.
http://en.wikipedia.org/wiki/Wikipedia:Public_domain_image_resources rather than an entry about pub domain images wikipedia provides a motherload of links to a wide range of resources. A good start.
http://www.libraryspot.com/images.htm Library spot is a good general reference site. Here you’ll find image links for kids as well as adults. Like wikipedia, the site is simple and neat.
http://www.readwriteweb.com/ Not much here on imagery. Perhaps the page changed over the past few weeks.
http://www.footnote.com/ Cool resource for archive images, mostly text from old newspapers, journals etc. but original photos too. $12 a month or $70 a year gives unlimited access. Browse by photos or you’ll get little more than text images. No luck finding an original photo of H.P. Lovecraft.
http://www.adobe.com/products/photoshop/index.html Photoshop is still the industry standard with many features most of us will rarely use.
http://www.adobe.com/products/fireworks/ Fireworks seems to be the more web friendly version of photshop.
http://www.gimp.org/ The official Gimp web site offers free down loads for this basic image editor. Free and simple is a good selling point and I’m using it for my web site.
http://www.gimpshop.com/ Gimpshop is sort of a Gimp/Photshop hybrid intended to accomodate photshop users to GIMP( GNU Image Manipulation Program).
The GIMP tutorial gives you a basic lowdown on how this free image editing program can clean up your photos. I began using Corel Paintshop but GIMP was all I really needed. I found everything I needed at Stock.XCHNG and imageafter.com and I was able to edit the images so that they worked in my site. It didn’t take long before I realized that the images didn’t have to be resized to fit into my tables. The pictures automatically fit, so I only needed to brighten them a bit.
Aside from the logical and aesthetic reasons for image choices final chapter in Beaird pointed out something I hadn’t thought of before: Hotlinking. Apparently it is a common problem in socialnetworking where users will benignly create links to their favorite images found on other servers. This could be a positive plug for another site, but more often it is a nuisance- slowing down other peoples servers/websites.
http://ilovetypography.comGreat site for typography enthusiasts. Looking around my house I’m reminded of the variety of lettering styles available!! Letters everywhere. The articles in this site review people who are not content with the thousands of styles available or simply love the challenge of creating new fonts. There’s a “free font” link following the typography link on the home page but it doesn’t seem to offer anything free. The rouge font has a great primal look to it.
http://typographica.org/ Another site for font lovers. There are some good reviews of fonts old and new.
http://www.microsoft.com/typography/default.mspx More resources. The overview explains Truetype technology as a common program used by Apple and Microsoft to deliver millions of fonts.
http://abc.planet-typography.com/ This site could use improvement. It has a decent appearance but the gallery was too limited and the “classic” link was dysfunctional.
http://www.alistapart.com/topics/design/typography/ Specific fonts for web designers.
http://www.rsub.com/typographic/Very cool history of typography tracing back 5000 years. The site has a good glossary as well.
http://www.digital-web.com/articles/css_typography/, http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html, CSS tutorials that improve the usual CSS font capabilities,and other tutorials found here.
http://designsnips.com/ Great examples of font usage in web design. Check out the Indiana Jones crystal skull buttons.
Readings: Last week I chose my fonts Juice ITC for the heading and Aerial for the text. This week we looked at more possibilities in our web site reviews. If I can find the time to mess around with Corel Paintshop or Gimp, I’d like to produce a detailed imaged Green Gaia heading. For now, I’m gathering free images and tweeking their contrast, sharpness and brightness. Resizing and creating links from the html to my server space. I’ve been pasting floral and tree images into my web pages but the images have to be retrieved separately. The Beair chapter 4 readings offer clear explanations of formats. JPEG is the standard created by professional photographers while GIF files are primarily for logos with fewer colors(256). GIF files are compressed taking up less space and therefore easily uploaded. They can have transparent backgrounds allowing them to sit over other images, whereas JPEGs are solid. PNG is basically an upgraded version of a GIF with a greater level of transparency the graphics themselves can be rendered opaque resulting in a cool watermark effect. This chapter also reiterates the significance of CSS. Instead of painstakingly editing images and rearranging them in different design motifs, CSS allows you to establish design rules that will overhaul the effects of the pages in one clean sweep. The same text and images can be be placed in different style sheets without having to micromanage each element.
Chapter 13 in the MacDonald text prepares us with some valuable advice: How to make money through our sites. There are basically 5 ways to do this: 1) donations- an unlikely resource but possible if you can convince visitors that it’s for a noble cause. 2) advertisements- a truly annoying method, but if done well and perhaps for socially responsible or environmentally sound businesses, it can be forgiven. Unless your getting a lot of traffic which means you can command greater fees, your not going to get rich. Register with Adsense. 3) referrals- sort of like product placements, instead of ads you might get paid to write nice “reviews” for generous corporations etc. Register with Amazon Associates. 4) merchandising- pimp your wares. People are buying everything online. If you own a business without a website you are potentially losing fortunes. Attractive and well organized Web sites can allow a retailer to close shop move to a cabin in the woods and operate entirely through their webshop. 5) the last option is to charge people to see your content. This might work for database vendors or big media outlets but less likely for most anyone else.
The best option seems to be to have products or services for sale and to use a service like Paypal. You can register your site with Paypal and let them deal with the creditcard transactions. If someone tries to pull a chargeback on you, Paypal will have a better chance of fighting them and you won’t lose out. Just as important is the fact that Paypal has all the buy now buttons, add to shopping cart, etc tools ready for you to download to your site. That alone should be worth the minor commissions they receive on your transactions.
Chapter 14. Jumps into Javascript and DHTML. Javascript is used to add interactive character to your site (bells and whistles) when you see popups and mouseovers you’re seeing what Javascript can do. I won’t have time to install any tricks before the course is over but reading this chapter and going through the basics gives me an understanding of what I’ll need to know to take me to a greater level of web designing. DHTML is the next step- combining CSS into the mix.
http://urbandirty.com/ This contains 433 photos of gritty, rusty, worn paint etc.. urban textures free for usage. I could probably use some of the earthy textures for soil in my site. The link to grunge textures brings you to a another arsenal of terrific masonry etc. These textures give an organic presence to your web pages.
http://www.flickr.com/groups/564994@N20/pool/ Another great resource, however searching for leaves, trees, plants turns up few hits. Yet browsing through the “best textures” reveals some great samples. In other words the internal search engine doesn’t seem to work well.
http://www.flickr.com/photos/torley/collections/72157594588432564/ Flikr has many other sources. This section offers some amazing free texture photos, found some great green vegetation samples.
http://browse.deviantart.com/resources/textures/ Some great swamp textures here, but the images couldn’t be copied without tracking them on another page. It would be better if you could copy them as you see them.
http://www.textureking.com/ Awesome textures found under specific categories. While flikr can send the user off into someones family stock photos, Texture King has links to other photos but you don’t end up looking at wedding images unless you want to.
http://www.grungetextures.com/ This is the same link I found through Urbandirty.
http://www.smashingmagazine.com/2008/01/29/grunge-style-in-modern-web-design/ Just when I thought these sites were getting redundant, this selection offers some really sharp texture images. A great variety and some weathered icons to choose from as well.
http://vandelaydesign.com/blog/design/photoshop-tutorials-textures/ Urgent!!! I must return to this site. There are numerous links to great tutorials for creating textures in Photoshop. Some of them give a rudimentary outline of how they created some fairly realistic textures and I’m sure a lot of trial and error will occur before you can produce anything that looks as professional. Fortunately links to each designs author might resolve further inquiries.
http://www.modernlifeisrubbish.co.uk/article/2007-more-web-design-trends-and-cliches Excellent overview of latest trends of design- texture of course is in but so are cartoon characters. The author, Stuart Brown, must spend a great deal of time online identifying design techniques.
http://www.modernlifeisrubbish.co.uk/article/screen-resolutions-and-aspect-ratios-worldwide The article posted here complicates things even more with the fact that different regions favor different screen resolutions. Interesting, and I’ll try to keep this in mind.
Readings: In week 5 we began looking at texture in the Beaird text. This week we really got to explore some sites that can dramatically change the look of your site with texture but the text was Chapter 4 typography- a little confusing. In chpt 4 Beaird covers the reasons for choosing particular text styles and fonts. I’ve chosen a JUICE ITC font through composer for my “Green Gaia Growers” heading and a standard Aerial for the body text. The heading worked well in Mozilla Firefox but Internet Explorer did not present the heading with the same beauty. This doesn’t ruin the site but I could get around this with the text created as a graphic file in an image editor. The body text would be too much to consider. Text in images look great but you have to keep returning to an image editor if you want to changed the text without changing its style. Beaird proposes a Scalable Inman Flash Replacement(sIFR) as an alternative but it still seems to require more effort than necessary. For now I’ll stick with standard fonts.
Chapter 11 in Creating Web Sites- introduces us to ways of bringing people to your sites. Meta tags; hidden information tags that describe your site or list keywords can provide search engines with the appropriate links; submit your URL to an internet directory and search engine; share links with others directly; set up a hit counter and server log to keep track of traffic. This is potentially the most important chapter of all. If your going to produce a useful website you better get it out there or it will just lurk in obscurity. Since Green Gaia Growers is solely a creation for this course I will not be promoting it. However, this chapter is earmarked for future reference.
Chapter 12 goes further with the concept of your site as a community. If you want your site to gain in popularity you need to provide interactive features. While television is unidirectional, the internet is about exchanging information. Internet users want to give feedback. For my site, I’ll have a link to the blog for this course. Here people could potentially let me know how wonderful it is, or more likely- how bland and primitive it is!!!
http://colorsontheweb.com/ – This site covers pretty much anything I ever wanted to know about color; theory, combinations, physics, etc. It goes a little further in depth than the Beaird Chpt 2 did and offers some great tools, particularly the color wheel. Spinning it randomly produces combinations of great colors- text, background and border. You can select one or two of the colors while spinning for other suitable colors. As I am designing for a nursery, I will be selecting earthtones, brown, green, and tan; But I’ll brighten things a little with an appropriate purple. I’ll have floral images so I don’t want to get to many colors in the tables. Ahh yes, tables. Manipulating the tables was truly annoying. Chapter 9 in the MacDonald text, points out a diminished usage of “invisible tables”, shifting instead toward style-based layout. Style based layout requires CSS to position panels, columns and images on your site rather than clunky boxes. After all my efforts to get an invisible table layout, I think I’ll stick with this for now. I’ve gone through the CSS Kompozer tutorial but I’m not having much luck figuring it out. If my site were to be in excess of 5 0r 6 pages I would probably be a bit more determined to use a style sheet. But looking at the html source code for my site, it doesn’t seem necessary. It’s pretty basic and the tags are easy to follow and replicate for 5-6 pages. I’ll have to tackle the stylesheet on a later date. Contrary to the book, I’ve decided to use purple borders around my table cells. Most sites will eliminate borders if there are background colors. The purple lines just seem to add a needed accent for this kind of website.
Chapter 10 discusses the use of “frames”. Frames allow multiple webpages to appear at once in a browser window. When a pagelink is clicked the page will appear within a frame rather than the entire window. This is good for retaining navigation menus etc., instead of duplicating these features on every page. Unfortunately, this practice is not without error. Search Engines can find this confusing and it is not compatible to XHTML or useful in hand held computer based devices.
Chapter 3 in Beaird gets into texture. I considered a solid dark green background to all of my pages, but after reading this chapter I decided to use a dark green jasmine image as a background tile. The repeated tile is easier to download than one large image. This can be done in a stylesheet, but I’m only using on the homepage so I’ll just change the background to that single page in the HTML. The main point of using textures is to break up the two dimensional look a site can have and as Beaird points out, texture gives you a sense of feeling the page rather than simply simply looking at it.
Another week has passed and I’d hoped for more progress. I jumped ahead in Kompozer, set up a basic layout for my Green Gaia Growers website and I’ve been jotting down content ideas; plant price lists, sustainable gardening links, homepage link, map, photo gallery, etc. The Beaird reading has been very helpful. The law of thirds or “turds” was particularly interesting as well as the tendency to put the links in a left aligned column, simple things we overlook.My difficulties thus far have been table and cell manipulation within Kompozer. Rearranging tables and cells in Word, Excel, Acces, etc, seems much easier. I’ve read through the help section within Kompozer and I’ve read several tutorials. All give basic instructions for html tags and uploading but not for layout instruction. Kompozer is useful but I’m curious as to what I’m missing out on without Dreamweaver. Chpter 7 in Creating Web Sites covers the basics of using graphics. GIF file formats are best for logos and JPEGs are best for photo images. PNGs are another format but older browsers have trouble with them. I’ll be sticking to reliable GIFs and JPEGs. I’m using Corel Paint Shop for my graphics program and I’ve spent hours manipulating family photos. Chpter 8 deals with creating links internal and external for your site. Much of this can be done easily with the link feature in KompoZer but the book offers concise manual instruction and understanding of the basic HTML commands. Unfortunately, reading about things that are ahead of where I am in putting this website together is less than ideal. I began designing my homepage and this has created challenges for starting my Cascading Style Sheet( the more you do before you establish a style sheet, the more code to sort through).
Web site reviews:
http://webstyleguide.com/index.html – This is really a good site for getting organized. (Something I notoriously struggle with) It sets forth an outline in stages and covers everything from information architecture to multimedia usage. Very useful for producing a functional site that meets the needs of the business/organization while attracting visitors. One interesting section describes three basic information structures to consider in layout; sequences, hierarchies, and webs.
http://universalusability.com/access_by_design/index.html – Here’s another A-Z handbook for layout and usability. Both sites open with tables of contents. However this one offers an aesthetically pleasing color scheme. While the webstyle guide is cold white with blue text this site is warm tan with soft blue borders etc. While white is typically easier to read from, this site offers a certain comfort for the user.
http://www.jjg.net/ia/ – This site is useful to designers and information architects focusing on user experience rather than aesthetics. The homepage appears clean and futuristic looking with a sharp font and large colorful icons that link to subcategories; elements of user experience, how to work as a web team, structural schematics, etc. Worth visiting later.
http://www.smashingmagazine.com/2008/05/08/now-more-than-ever-50-more-excellent-blog-designs/ – Wow!! smashing magazine offers lists and links to some amazingly attractive blogs. Many ideas for our own sites.
|
|
